<template>
  <div style="margin-bottom:6px;">
    <el-row style="height: 216px;border-radius: 16px;float: left;" class="item-container">
      <el-row style="float: left; display: flex; width: 100%;">
        <el-col style="flex: 1; height: 72px; padding: 16px 20px; color: #ffffff;">
          <el-row style="text-align: revert; height: 24px">
            堡垒机
          </el-row>
          <el-row style="text-align: revert; height: 12px; font-size: 12px; color: #c0c0c0;">
            堡垒机当前连接会话
          </el-row>
        </el-col>
        <el-col style="width: 100px; height: 72px;justify-content: right">
          <el-row style="justify-content: right;width: 100%;display: flex;">
            <!--          <el-tag type="success" style="border-radius: 0 16px 0 16px;">=在线</el-tag>-->
            <el-tag type="danger" style="border-radius: 0 16px 0 16px;">离线</el-tag>
          </el-row>
          <el-row>
            <el-button type="primary" icon="el-icon-monitor" circle size="mini" @click="openPage()"></el-button>
            <el-button type="danger" icon="el-icon-refresh-right" circle size="mini" @click="refreshDate()"></el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="height: 144px;padding: 20%">
        暂无会话
      </el-row>
    </el-row>
  </div>
</template>

<script>
import cd_png from '@/assets/dashboard/cd.png'
import disk_png from '@/assets/dashboard/disk.png'
import iscsi_png from '@/assets/dashboard/iscsi.png'
import nfs_png from '@/assets/dashboard/nfs.png'
import smb_png from '@/assets/dashboard/smb.png'
import usb_png from '@/assets/dashboard/usb.png'


export default {
  name: "HardwareItemBastion",
  props: {
    nameP: {
      type: String,
      default: "UPS",
    },
    infoP: {
      type: String,
      default: "UPS",
    }
  },
  data() {
    return {
      diskType: disk_png,
      color: 0x000000,
    }
  },
  created() {
    switch (this.diskTypeP) {
      case "cd":
        this.diskType = cd_png;
        break;
      case "disk":
        this.diskType = disk_png;
        break;
      case "iscsi":
        this.diskType = iscsi_png;
        break;
      case "nfs":
        this.diskType = nfs_png;
        break;
      case "smb":
        this.diskType = smb_png;
        break;
      case "usb":
        this.diskType = usb_png;
        break;
    }
  },
  methods: {
    openPage() {
      this.$emit("openWindow")
    },
    refreshDate() {
      //刷新数据
    }
  },
  computed: {},
  filters: {}
}
</script>
<style scoped>

.item-container {


  color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 1.4vw;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;


  //position: relative;
  //background: rgba(255, 255, 255);
  //backdrop-filter: blur(12px);
  //-webkit-backdrop-filter: blur(12px);
  //transition: all 0.3s ease;
}


</style>
